<template>
    <div class="docker">
       <div class="docker_footer">
           <ul>
            <li>
                <router-link to="/">
                     <div class="tubiao">
                        <img src="@/assets/首页.png" alt="" >
                    </div>
                </router-link>
            </li>
            <li>
                <router-link to="/shopping">
                    <div class="tubiao">
                        <img src="@/assets/购物车.png" alt="">
                    </div>
                </router-link>
            </li>
            <li>
                <router-link to="/order">
                    <div class="tubiao">
                        <img src="@/assets/订单.png" alt="">
                    </div>
                </router-link>
            </li>
            <li>
                <router-link to="/mine">
                    <div class="tubiao">
                        <img src="@/assets/我的.png" alt="">
                    </div>
                </router-link>
            </li>
           </ul>
       </div>
    </div>
</template>

<script setup>
import {useRouter} from  "vue-router";
const router = useRouter();

</script>

<style lang="scss" scoped>
    .docker{  
        position:fixed;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: .49rem;
        background-color: #fff;
        border:none;
    }
    .docker_footer{
        margin-top: 0.07rem;
        margin-left: 0.45rem;
        width: 2.95rem;
        height: 0.36rem;
    }
    ul{
        display: flex;
        justify-content:space-between;

    }
    li{
        width: 0.4rem;
        height: 0.39rem;

        .tubiao{
            margin-left: 0.08rem;
            width: 0.2rem;
            height: 0.2rem;

            .box1{
                display: block;
            }
            .box2{
                display: none;
            }
            .box3{
                display: block;
            }
            // .box4{
            //     display: none;
            // }
        }
        .text{
            margin-top: 0.05rem;
            text-align: center;
            width: 0.4rem;
            height: 0.14rem;
            font-size: 0.12rem;
            line-height: 0.14rem;
        }
    }
</style>